<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间管理 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'accent': '#EC4899',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6',
                        'text-muted-light': '#6B7280',
                        'border-light': '#E5E7EB'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; 
            color: #1F2937; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh; 
        }
        .bottom-nav {
            border-top: 1px solid #E5E7EB; 
        }
        .nav-item.active i, .nav-item.active span {
            color: #10B981; 
        }
        .activity-item .fa-circle {
            color: #9CA3AF; 
        }
        .activity-item.running .fa-pause-circle {
            color: #10B981;
        }
        .activity-item.paused .fa-play-circle {
            color: #F59E0B; /* Amber 500 for paused state */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-base-content-light">时间记录</h1>
            <div>
                <button class="text-text-muted-light hover:text-primary">
                    <i class="fas fa-calendar-alt"></i> <!-- Date picker / filter -->
                </button>
                <button class="ml-3 text-text-muted-light hover:text-primary" onclick="document.location.href='settings.html'">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="flex-grow p-4 overflow-y-auto">
        <div class="mb-6">
            <h2 class="text-lg font-medium text-text-muted-light mb-3">今日活动</h2>
            <div class="space-y-3">
                <!-- Activity Item 1: Running Timer -->
                <div class="activity-item running bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-briefcase text-2xl text-blue-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">工作 - 项目A</h3>
                            <p class="text-sm text-text-muted-light">已进行: <span class="text-primary font-medium">01:23:45</span></p>
                        </div>
                    </div>
                    <button class="text-2xl">
                        <i class="fas fa-pause-circle"></i>
                    </button>
                </div>

                <!-- Activity Item 2: Logged -->
                <div class="activity-item bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-book-reader text-2xl text-purple-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">学习 - 专业课程</h3>
                            <p class="text-sm text-text-muted-light">时长: 45分钟</p>
                        </div>
                    </div>
                    <span class="text-sm text-text-muted-light">09:00 - 09:45</span>
                </div>

                <!-- Activity Item 3: Paused Timer -->
                <div class="activity-item paused bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-dumbbell text-2xl text-green-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">运动 - 健身房</h3>
                            <p class="text-sm text-text-muted-light">已暂停: <span class="text-amber-500 font-medium">00:15:30</span></p>
                        </div>
                    </div>
                    <button class="text-2xl">
                        <i class="fas fa-play-circle"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="mt-8">
            <h2 class="text-lg font-medium text-text-muted-light mb-3">时间分配 (今日)</h2>
            <div class="bg-neutral-light p-4 rounded-lg shadow">
                <!-- Placeholder for chart -->
                <div class="h-48 flex items-center justify-center text-text-muted-light">
                    <i class="fas fa-chart-pie text-4xl mr-2"></i> <span>饼图/柱状图区域</span>
                </div>
            </div>
        </div>

        <div class="fixed bottom-16 right-4 z-20">
             <button onclick="document.location.href='time_create.html'" class="bg-secondary hover:bg-secondary-focus text-white font-bold w-14 h-14 rounded-full flex items-center justify-center shadow-lg">
                <i class="fas fa-stopwatch text-xl"></i>
            </button>
        </div>
    </main>

    <nav class="bottom-nav bg-base-100-light p-3 flex justify-around items-center sticky bottom-0 z-10 border-t border-border-light">
        <a href="home_habits.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-check-double text-xl"></i>
            <span class="text-xs mt-1">习惯</span>
        </a>
        <a href="home_todos.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-list-ul text-xl"></i>
            <span class="text-xs mt-1">待办</span>
        </a>
        <a href="home_time.html" class="nav-item active flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-clock text-xl"></i>
            <span class="text-xs mt-1">时间</span>
        </a>
        <a href="home_finance.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-wallet text-xl"></i>
            <span class="text-xs mt-1">财务</span>
        </a>
        <a href="home_stats.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-chart-line text-xl"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
    </nav>

</body>
</html>